import '@umijs/max';
import React, { useEffect, useState } from 'react';
import {
  listMySysNotificationByPageUsingPost,
  listSysNotificationByPageUsingPost,
  updateSysNotificationUsingPost,
} from '@/services/api/sysNotificationController';
import { List } from 'antd/lib';
import { Badge, Button, message, PaginationProps, Space } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';

/**
 * 系统通知页面
 *
 * @constructor
 */
const SysNotificationPage: React.FC = () => {
  // 是否显示加载
  const [loading, setLoading] = useState<boolean>(false);
  // 系统通知数据
  const [data, setData] = useState<API.SysNotification[]>([]);
  const [total, setTotal] = useState<number>();
  const [searchParams, setSearchParams] = useState<API.SysNotificationQueryRequest>({
    current: 1,
    pageSize: 10,
    sortField: 'notificationTime',
    sortOrder: 'descend',
  });
  // 分页总数显示
  const showTotal: PaginationProps['showTotal'] = (total) => `总数 ${total}`;

  /**
   * 加载数据
   */
  const loadData = async () => {
    setLoading(true);
    try {
      const res = await listMySysNotificationByPageUsingPost(searchParams);
      if (res.data) {
        setData(res.data.records || []);
        setTotal(res.data.total);
      } else {
        setData([]);
      }
    } catch (e) {}
    setLoading(false);
  };

  /**
   * 标为已读
   * @param id
   */
  const updateHandle = async (id: any) => {
    if (id) {
      try {
        const res = await updateSysNotificationUsingPost({ id });
        if (res.data) {
          message.success('成功');
          loadData();
        } else {
          message.error('失败');
        }
      } catch (e: any) {
        // message.error(e.getMessage);
      }
    }
  };

  /**
   * 参数改变加载数据
   */
  useEffect(() => {
    loadData();
  }, [searchParams]);

  return (
    <div className="sys-notofication">
      <List
        itemLayout="horizontal"
        loading={loading}
        dataSource={data}
        pagination={{
          onChange: (page, pageSize) => {
            setSearchParams({ ...searchParams, current: page, pageSize });
          },
          showTotal: showTotal,
          total: total,
          current: searchParams.current,
          pageSize: searchParams.pageSize,
        }}
        renderItem={(item, index) => (
          <List.Item key={index}>
            <List.Item.Meta
              title={
                <Space size={'large'}>
                  <Badge dot={item.status === 'unread'}>{item.title}</Badge>
                  <div>
                    <ClockCircleOutlined />
                    {item.notificationTime}
                  </div>
                </Space>
              }
              description={item.content}
            />
            <>
              {item.status === 'unread' ? (
                <Badge dot={item.status === 'unread'}>
                  <Button onClick={() => updateHandle(item.id)}>标为已读</Button>
                </Badge>
              ) : (
                '已读'
              )}
            </>
          </List.Item>
        )}
      />
    </div>
  );
};
export default SysNotificationPage;
